<script lang="ts" setup>
import { computed } from 'vue';
import type { CouponScene, CouponStatus } from '@/types/coupon';
import CouponIcon from './coupon-icon.vue';
import CouponMeta from './coupon-meta.vue';
import CouponBtn from './coupon-btn.vue';
import { useLocale } from '@/locale/locale';

const props = defineProps<{
  scene?: CouponScene;
  status?: CouponStatus;
  title?: string;
  startDate?: string;
  endDate?: string;
  atLeast?: string;
  desc?: string;
  restaurantIds?: string;
  restaurantNames?: string;
  propertyIds?: string;
  propertyNames?: string;
  spaServiceTypeStr?: string;
  carServiceTypeStr?: string;
}>();

const { t } = useLocale();

const isDisabled = computed(() => {
  return props.status !== 1;
});
</script>

<template>
  <view class="coupon-details">
    <view class="coupon-details__header">
      <coupon-icon :disabled="isDisabled" :scene="scene" />
      <view class="flex-1">
        <coupon-meta
          :at-least="atLeast"
          :disabled="isDisabled"
          :end-date="endDate"
          :start-date="startDate"
          :title="title"
        />
      </view>
      <view class="flex items-center">
        <coupon-btn :disabled="isDisabled" :status="status" />
      </view>
    </view>
    <view class="coupon-details__divider">
      <view class="coupon-details__divider-left" />
      <view class="coupon-details__divider-line" />
      <view class="coupon-details__divider-right" />
    </view>
    <view class="coupon-details__body">
      <view class="mb-3 text-base text-primary font-medium">{{ t('LAKey_couponUsedNotes') }}</view>
      <view class="mb-3 text-sm text-primary">
        {{ desc }}
      </view>
      <view class="mb-3 text-base text-primary font-medium" v-if="scene == 1">{{ t('ApplicableProperties') }}</view>
      <view class="mb-3 text-base text-primary font-medium" v-else-if="scene == 2">{{ t('ApplicableRestaurant') }}</view>
      <view class="mb-3 text-base text-primary font-medium" v-else>{{ t('ApplicableScene') }}</view>
      <view class="text-sm text-primary" v-if="scene == 1">
        {{ propertyIds ? t('ApplicablePartProperties') + propertyNames : t('ApplicableAllProperties') }}
      </view>
      <view class="text-sm text-primary" v-if="scene == 2">
        {{ restaurantIds ? t('ApplicablePartRestaurant') + restaurantNames : t('ApplicableAllRestaurant') }}
      </view>
      <view class="text-sm text-primary" v-if="scene == 3">
        {{ spaServiceTypeStr }}
      </view>
      <view class="text-sm text-primary" v-if="scene == 4">
        {{ carServiceTypeStr }}
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.coupon-details {
  position: relative;

  &__header {
    background-color: #fff;
    border-radius: 16rpx 16rpx 0 0;
    display: flex;
    padding: 32rpx 32rpx 18rpx;
    position: relative;
  }

  &__divider {
    align-items: center;
    background-color: #fff;
    display: flex;
    height: 34rpx;
    position: relative;

    &-left,
    &-right {
      background-color: #f4f4f4;
      border-radius: 50%;
      height: 32rpx;
      width: 32rpx;
    }

    &-left {
      transform: translateX(-50%);
    }

    &-right {
      transform: translateX(50%);
    }

    &-line {
      border: 2rpx dashed #eee;
      width: 658rpx;
    }
  }

  &__body {
    background-color: #fff;
    border-radius: 0 0 16rpx 16rpx;
    padding: 20rpx 32rpx 40rpx;
  }
}
</style>
